import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/radian.dart';
import 'package:travel/utils/styles.dart';
import 'package:travel/utils/tools.dart';
import 'package:travel/screen/flutter_screenutil.dart';

class UsernameController extends GetxController {
  RxString username = '晚风吹心里'.obs;
}

class UsernameView extends GetView<UsernameController> {
  const UsernameView({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
          backgroundColor: ColorsUtils.backgroundColor,
          appBar: AppBar(
            automaticallyImplyLeading: true,
            leading: InkWell(
              onTap: Get.back,
              child: Icon(
                Icons.arrow_back_ios,
                color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                size: 20.w,
              ),
            ),
            leadingWidth: 40.w,
          ),
          body: SingleChildScrollView(
            padding: EdgeInsets.all(20.w),
            child: Column(
              children: [
                Container(
                  padding: EdgeInsets.only(top: 15.h),
                  alignment: Alignment.centerLeft,
                  child: Text(
                    '用户名',
                    style:
                        StylesUtils.customTextStyle(color: ColorsUtils.color3333, fontSize: 18.sp),
                  ),
                ),
                Container(
                    padding: EdgeInsets.only(top: 20.h),
                    alignment: Alignment.centerLeft,
                    child: TextField(
                      controller: ToolsUtils.editingController(controller.username.value),
                      cursorWidth: 2.0,
                      cursorRadius: const Radius.circular(2),
                      cursorColor: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                      style: StylesUtils.customTextStyle(
                          fontSize: 15.sp, color: ColorsUtils.color3333),
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        focusedBorder: InputBorder.none,
                        hintText: '请输入用户名称',
                        contentPadding: EdgeInsets.symmetric(vertical: 15.h),
                        isCollapsed: true,
                        isDense: true,
                        hintStyle: StylesUtils.customTextStyle(
                          color: ColorsUtils.color9999,
                        ),
                        suffixIcon: IconButton(
                            onPressed: () {
                              controller.username.value = '';
                            },
                            icon: Icon(
                              Icons.close_sharp,
                              size: 12,
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                            )),
                        suffixIconConstraints: BoxConstraints.expand(width: 18.w, height: 18.h),
                        constraints: BoxConstraints(maxHeight: 38.h),
                      ),
                      onChanged: (String keyword) {
                        controller.username.value = keyword;
                      },
                    )),
                Container(
                  padding: EdgeInsets.only(top: 20.h),
                  alignment: Alignment.centerLeft,
                  child: Text(
                    '可输入3-30个字符的用户名，支持中文、英文、数字，180天内只能修改 1 次，还剩 0 次。',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color9999, fontSize: 13.sp, lineHeight: 1.2.h),
                  ),
                ),
                Container(
                  height: 45.h,
                  margin: EdgeInsets.only(top: 30.h),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10.w),
                      gradient: LinearGradient(colors: [
                        ColorsUtils.rgba(52, 120, 246, 1),
                        ColorsUtils.rgba(2, 167, 240, 1)
                      ], stops: const [
                        0,
                        0.99
                      ], transform: GradientRotation(RadianUtils.angleToRadian(90)))),
                  alignment: Alignment.center,
                  child: Text(
                    '保存',
                    style: StylesUtils.customTextStyle(fontSize: 16.sp),
                  ),
                )
              ],
            ),
          ),
        ));
  }
}
